<template>
	<view class="jisuan">
		<view class="jisuan_left">
			<label class="radio"><radio value="r1" @click="allselect" :checked="selected" color="#f00000" />全选</label> 
		</view>
		<view class="jisuan_center">
			<text>合计:</text> <view class="qian">{{money|toNum}}</view>
		</view>
		<view class="jisuan_right" @click="jiesuan">
			<text>结算</text> <text>({{totle}})</text>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from "vuex"

	export default {
		name:"my-settle",
		data() {
			return {
				second:3,
				bh:"GD20180504000000000965"
			};
			
		},
		computed:{
			...mapState("m_cart",["cart"]),
			...mapState("m_user",["address","token"]),
			...mapGetters("m_user",["details"]),
			totle(){
				var checkedcart = this.cart.filter((item)=> item.goods_state == true);
				var num = checkedcart.reduce((val,item, index)=>{ return item.goods_count + val },0);
				return num
			},
			money(){
				var checkedcart = this.cart.filter((item)=> item.goods_state == true);
				var num = checkedcart.reduce((val,item, index)=>{ return item.goods_count*item.goods_price + val },0);
				return num
			},
			selected(){
				var select = this.cart.every((item)=> item.goods_state == true);
				return select
			}
		},
		methods:{
			...mapMutations("m_cart",["updateAllGoods"]),
			...mapMutations("m_user",["updateRederictInfo"]),
			allselect(){
				var totle_select = this.selected;
				this.updateAllGoods(!totle_select);
			},
			delayNavigate(){
				var timer = setInterval(()=>{
					this.second -- ;
					uni.showToast({
						title: "还有" + this.second + "s,自动跳转到登录页",
						duration: 1000,
						mask:true,
						icon:"none"
					});
					if(this.second == 0){
						uni.hideToast();
						clearInterval(timer);
						this.second = 3;
						
						uni.switchTab({
							url:"/pages/my/my",
							success:()=>{
								this.updateRederictInfo({
									//跳转方式
									opentype:"switchTab",
									//从哪个页面跳转过来
									url:"/pages/cart/cart"
								})
							}
							// url:"@/pages/my/my"
						});
					}
				},1000);
				
				
				
			},
			jiesuan(){
				//正常的话 应该把这个状态为vuex中的filter 获取选中的发个数
				var checkedcart = this.cart.filter((item)=> item.goods_state == true);
				if(checkedcart.length == 0) return uni.$showMsg("请先选中商品");
				//判断是否选择了地址
				if(JSON.stringify(this.address) == "{}") return uni.$showMsg("请选择收货地址");
				// if(this.token == "") return uni.$showMsg("请先登录");
				if(this.token == ""){
					this.delayNavigate();
				};
				//实现支付解接口
				this.payOrder();
			},
			async payOrder(){
				//1. 创建订单
				// 1.1组织订单信息对象
				const orderInfo ={
					order_price:"0.1",
					consignee_addr:this.details,
					goods:this.cart.filter((item)=> item.goods_state == true).map(items => ({
						goods_id:items.goods_id,
						goods_number:items.goods_count,
						goods_price:items.goods_price,
					}))
				}
				//发起网络请求
				const {date,res} = await uni.$http.post("/api/public/v1/my/orders/create",orderInfo);
				console.log(orderInfo);
				console.log(this.bh);
				uni.requestPayment()
			}
		},
		filters:{
			toNum(price){
				var num = Number(price);
				if(num) {
					return "￥" + num.toFixed(2) 
				}else{
					return "￥" + 0 
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jisuan{
		position: fixed;
		bottom: 0;
		left: 15rpx;
		right: 15rpx;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		
	}
	.jisuan>view{
		flex: 0.3;
	}
	.jisuan_left{
		display:flex;
		justify-content: flex-start;
		align-items: center;
	}
	.jisuan_center{
		display:flex;
		justify-content: center;
		align-items: center;
		
	}
	.jisuan_right{
		height: 100%;
		background-color: #f00000;
		display: flex;
		color: #fff;
		text-align: center;
		line-height: 50px;
		display: flex;
		justify-content:center;
		align-items: center;
	}
	.qian{
		color: #ff0000;
		
		white-space: nowrap;
		margin-left: 10rpx;
	}
	.jisuan_center view {
		white-space: nowrap;
	}
</style>
